<template>
  <div class="edit">
    <div class="editor">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="标题" prop="title" class="form-item">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>

        <el-form-item label="" prop="editortext" class="form-editor">
          <wang-edit ref="wangEditorRef" v-if="editShow" :editorParams="editorParams" />
        </el-form-item>

        <el-form-item>
          <div class="form-button">
            <div class="list" @click="editCancel">取消</div>
            <div class="list" @click="editConfirm('ruleForm')">保存</div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import WangEdit from "@/components/wangEditor/RichTextEditor.vue";

import { systemAgreementListId, systemAgreementListAdd } from "@/api/system";

var throttle = require("@/utils/throttle"); // 防抖

export default {
  components: {
    WangEdit,
  },

  data() {
    return {
      id: "",
      editObj: {},
      ruleForm: {
        title: "",
        editortext: "",
      },
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 1, message: "最低输入一个字", trigger: "blur" },
        ],
      },

      //-----------
      editShow: false,
      editorParams: {
        content: "", // 富文本内容
        placeholder: "请填写内容", // 富文本占位内容
        uploadImageUrl: "/file", // 富文本上传图片的地址
        height: "400px", // 富文本最小高度
        isDisabled: false, // 富文本是否禁用
      },
    };
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.systemAgreementListIdMet();
    }
  },
  mounted() {
    this.editShow = true;
  },
  methods: {
    systemAgreementListIdMet() {
      let params = this.id;

      systemAgreementListId(params).then((res) => {
        if (res.errorCode == null) {
          this.editObj = res.resultData;
          this.ruleForm.title = res.resultData.agreementName;
          this.editorParams.content = res.resultData.agreementContent;
        }
      });
    },
    //-----------
    setHtml(html) {
      // 回显富文本框中内容
      let _this = this;
      this.$nextTick(() => {
        // 此处用来解决富文本编辑器未完全加载的问题
        setTimeout(() => {
          _this.$refs.wangEditorRef.setEditorHtml(html);
        }, 200);
      });
    },
    getHtml() {
      this.$refs.wangEditorRef.getEditorHtml();
    },
    //------------------
    editCancel() {
      this.ruleForm.title = "";
      this.editorParams.content = "";

      this.$router.push({
        path: "/system/agreement",
      });
    },
    editConfirm: throttle.throttle(function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            agreementId: this.editObj.agreementId,
            agreementName: this.ruleForm.title,
            agreementContent: this.$refs.wangEditorRef.getEditorHtml(),
          };

          systemAgreementListAdd(params).then((res) => {
            if (res.errorCode == null) {
              this.$message.success("修改协议成功！");

              setTimeout(() => {
                this.$router.push({
                  path: "/system/agreement",
                });
              }, 1000);
            }
          });
        } else {
          return false;
        }
      });
    }, 3000),
  },
};
</script>

<style lang="less" scoped>
.edit {
  .editor {
    .demo-ruleForm {
      .form-item {
        width: 500px;
        display: flex;
        align-items: center;

        /deep/ .el-form-item__content {
          width: 88%;
        }
      }

      .form-editor {
        margin-top: 40px;
        width: 70%;
      }

      .form-button {
        display: flex;
        align-items: center;

        /deep/ .el-form-item__content {
          line-height: 0;
        }

        .list {
          background: #3da8f5;
          color: #fff;
          font-size: 16px;
          margin-right: 20px;
          border-radius: 5px;
          width: 80px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .list:first-child {
          background: #808080;
        }
      }
    }
  }
}
</style>